<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>策略增强管理面板 - Homalos v2</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --info-color: #17a2b8;
            --light-bg: #f8f9fa;
            --dark-bg: #343a40;
        }

        body {
            background-color: var(--light-bg);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .navbar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .card-header {
            background: linear-gradient(135deg, #fff, #f8f9fa);
            border-bottom: 2px solid #e9ecef;
            border-radius: 15px 15px 0 0 !important;
            font-weight: 600;
        }

        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .status-running {
            background-color: var(--success-color);
            color: white;
        }

        .status-stopped {
            background-color: var(--warning-color);
            color: white;
        }

        .status-error {
            background-color: var(--danger-color);
            color: white;
        }

        .status-healthy {
            background-color: var(--success-color);
            color: white;
        }

        .status-unhealthy {
            background-color: var(--danger-color);
            color: white;
        }

        .status-unknown {
            background-color: var(--info-color);
            color: white;
        }

        .metric-card {
            background: linear-gradient(135deg, #fff, #f8f9fa);
            border-left: 4px solid var(--secondary-color);
        }

        .metric-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .metric-label {
            color: #6c757d;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-custom {
            border-radius: 25px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .table-custom {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .table-custom thead {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }

        .table-custom tbody tr:hover {
            background-color: #f8f9fa;
            transform: scale(1.01);
            transition: all 0.2s ease;
        }

        .loading-spinner {
            display: none;
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .loading .loading-spinner {
            display: inline-block;
        }

        .modal-content {
            border-radius: 15px;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .modal-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 15px 15px 0 0;
        }

        .progress-custom {
            height: 8px;
            border-radius: 10px;
            background-color: #e9ecef;
        }

        .progress-bar-custom {
            border-radius: 10px;
            transition: width 0.6s ease;
        }

        .alert-custom {
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-graph-up-arrow me-2"></i>
                Homalos v2 - 策略增强管理
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="refreshDashboard()">
                            <i class="bi bi-arrow-clockwise me-1"></i>刷新
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#settingsModal">
                            <i class="bi bi-gear me-1"></i>设置
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 概览指标 -->
        <div class="row mb-4">
            <div class="col-md-3 mb-3">
                <div class="card metric-card">
                    <div class="card-body text-center">
                        <div class="metric-value" id="totalStrategies">0</div>
                        <div class="metric-label">总策略数</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card metric-card">
                    <div class="card-body text-center">
                        <div class="metric-value text-success" id="runningStrategies">0</div>
                        <div class="metric-label">运行中</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card metric-card">
                    <div class="card-body text-center">
                        <div class="metric-value text-success" id="healthyStrategies">0</div>
                        <div class="metric-label">健康策略</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <div class="card metric-card">
                    <div class="card-body text-center">
                        <div class="metric-value text-danger" id="errorStrategies">0</div>
                        <div class="metric-label">异常策略</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 策略列表 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-list-ul me-2"></i>策略列表
                        </h5>
                        <div>
                            <button class="btn btn-outline-primary btn-custom me-2" onclick="refreshStrategies()">
                                <i class="bi bi-arrow-clockwise me-1"></i>刷新
                            </button>
                            <button class="btn btn-primary btn-custom" data-bs-toggle="modal" data-bs-target="#addStrategyModal">
                                <i class="bi bi-plus-circle me-1"></i>添加策略
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-custom" id="strategiesTable">
                                <thead>
                                    <tr>
                                        <th>策略名称</th>
                                        <th>UUID</th>
                                        <th>运行状态</th>
                                        <th>健康状态</th>
                                        <th>启动时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="strategiesTableBody">
                                    <!-- 动态加载策略数据 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 策略详情模态框 -->
    <div class="modal fade" id="strategyDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-info-circle me-2"></i>策略详情
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="strategyDetailContent">
                    <!-- 动态加载策略详情 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="validateStrategy()">验证策略</button>
                    <button type="button" class="btn btn-warning" onclick="checkDependencies()">检查依赖</button>
                    <button type="button" class="btn btn-success" onclick="recoverStrategy()">恢复策略</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加策略模态框 -->
    <div class="modal fade" id="addStrategyModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-plus-circle me-2"></i>添加策略
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addStrategyForm">
                        <div class="mb-3">
                            <label for="strategyPath" class="form-label">策略文件路径</label>
                            <input type="text" class="form-control" id="strategyPath" required>
                        </div>
                        <div class="mb-3">
                            <label for="strategyName" class="form-label">策略名称</label>
                            <input type="text" class="form-control" id="strategyName" required>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="autoStart">
                                <label class="form-check-label" for="autoStart">
                                    自动启动策略
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addStrategy()">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div class="modal fade" id="settingsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-gear me-2"></i>系统设置
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="refreshInterval" class="form-label">自动刷新间隔（秒）</label>
                        <input type="number" class="form-control" id="refreshInterval" value="30" min="5" max="300">
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="autoRefresh" checked>
                            <label class="form-check-label" for="autoRefresh">
                                启用自动刷新
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="showNotifications" checked>
                            <label class="form-check-label" for="showNotifications">
                                显示通知
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveSettings()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 通知容器 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer">
        <!-- 动态生成 Toast 通知 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let currentStrategyUuid = null;
        let autoRefreshInterval = null;
        let settings = {
            refreshInterval: 30,
            autoRefresh: true,
            showNotifications: true
        };

        // API 基础URL
        const API_BASE_URL = '/api/v1/strategies';

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadSettings();
            refreshDashboard();
            setupAutoRefresh();
        });

        // 加载设置
        function loadSettings() {
            const savedSettings = localStorage.getItem('strategyDashboardSettings');
            if (savedSettings) {
                settings = { ...settings, ...JSON.parse(savedSettings) };
                document.getElementById('refreshInterval').value = settings.refreshInterval;
                document.getElementById('autoRefresh').checked = settings.autoRefresh;
                document.getElementById('showNotifications').checked = settings.showNotifications;
            }
        }

        // 保存设置
        function saveSettings() {
            settings.refreshInterval = parseInt(document.getElementById('refreshInterval').value);
            settings.autoRefresh = document.getElementById('autoRefresh').checked;
            settings.showNotifications = document.getElementById('showNotifications').checked;
            
            localStorage.setItem('strategyDashboardSettings', JSON.stringify(settings));
            
            // 重新设置自动刷新
            setupAutoRefresh();
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('settingsModal'));
            modal.hide();
            
            showToast('设置已保存', 'success');
        }

        // 设置自动刷新
        function setupAutoRefresh() {
            if (autoRefreshInterval) {
                clearInterval(autoRefreshInterval);
            }
            
            if (settings.autoRefresh) {
                autoRefreshInterval = setInterval(refreshDashboard, settings.refreshInterval * 1000);
            }
        }

        // 刷新整个仪表板
        async function refreshDashboard() {
            try {
                await Promise.all([
                    loadHealthSummary(),
                    loadStrategies()
                ]);
            } catch (error) {
                console.error('刷新仪表板失败:', error);
                showToast('刷新仪表板失败', 'error');
            }
        }

        // 加载健康状态摘要
        async function loadHealthSummary() {
            try {
                const response = await fetch(`${API_BASE_URL}/health/summary`);
                const result = await response.json();
                
                if (result.success) {
                    const data = result.data;
                    document.getElementById('totalStrategies').textContent = data.total_strategies;
                    document.getElementById('runningStrategies').textContent = data.running_strategies;
                    document.getElementById('healthyStrategies').textContent = data.healthy_strategies;
                    document.getElementById('errorStrategies').textContent = data.error_strategies;
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('加载健康状态摘要失败:', error);
                // 设置默认值
                document.getElementById('totalStrategies').textContent = '-';
                document.getElementById('runningStrategies').textContent = '-';
                document.getElementById('healthyStrategies').textContent = '-';
                document.getElementById('errorStrategies').textContent = '-';
            }
        }

        // 加载策略列表
        async function loadStrategies() {
            try {
                const response = await fetch(`${API_BASE_URL}/health/summary`);
                const result = await response.json();
                
                if (result.success) {
                    const strategies = result.data.strategies;
                    renderStrategiesTable(strategies);
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('加载策略列表失败:', error);
                document.getElementById('strategiesTableBody').innerHTML = 
                    '<tr><td colspan="6" class="text-center text-muted">加载失败</td></tr>';
            }
        }

        // 渲染策略表格
        function renderStrategiesTable(strategies) {
            const tbody = document.getElementById('strategiesTableBody');
            
            if (strategies.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无策略</td></tr>';
                return;
            }
            
            tbody.innerHTML = strategies.map(strategy => `
                <tr class="fade-in">
                    <td>
                        <strong>${strategy.strategy_name}</strong>
                    </td>
                    <td>
                        <code class="small">${strategy.strategy_uuid}</code>
                    </td>
                    <td>
                        <span class="status-badge status-${strategy.status}">
                            ${getStatusText(strategy.status)}
                        </span>
                    </td>
                    <td>
                        <span class="status-badge status-${strategy.health_status}">
                            ${getHealthStatusText(strategy.health_status)}
                        </span>
                    </td>
                    <td>
                        ${strategy.start_time ? new Date(strategy.start_time).toLocaleString() : '-'}
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm" role="group">
                            <button class="btn btn-outline-info" onclick="showStrategyDetail('${strategy.strategy_uuid}')" title="查看详情">
                                <i class="bi bi-info-circle"></i>
                            </button>
                            <button class="btn btn-outline-primary" onclick="validateStrategy('${strategy.strategy_uuid}')" title="验证策略">
                                <i class="bi bi-check-circle"></i>
                            </button>
                            <button class="btn btn-outline-warning" onclick="checkDependencies('${strategy.strategy_uuid}')" title="检查依赖">
                                <i class="bi bi-diagram-3"></i>
                            </button>
                            <button class="btn btn-outline-success" onclick="recoverStrategy('${strategy.strategy_uuid}')" title="恢复策略">
                                <i class="bi bi-arrow-clockwise"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        // 获取状态文本
        function getStatusText(status) {
            const statusMap = {
                'running': '运行中',
                'stopped': '已停止',
                'error': '错误'
            };
            return statusMap[status] || status;
        }

        // 获取健康状态文本
        function getHealthStatusText(healthStatus) {
            const healthMap = {
                'healthy': '健康',
                'unhealthy': '不健康',
                'unknown': '未知'
            };
            return healthMap[healthStatus] || healthStatus;
        }

        // 显示策略详情
        async function showStrategyDetail(strategyUuid) {
            currentStrategyUuid = strategyUuid;
            
            try {
                const response = await fetch(`${API_BASE_URL}/${strategyUuid}/health?include_metrics=true&include_anomalies=true`);
                const result = await response.json();
                
                if (result.success) {
                    renderStrategyDetail(result.data);
                    const modal = new bootstrap.Modal(document.getElementById('strategyDetailModal'));
                    modal.show();
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('获取策略详情失败:', error);
                showToast('获取策略详情失败', 'error');
            }
        }

        // 渲染策略详情
        function renderStrategyDetail(data) {
            const content = document.getElementById('strategyDetailContent');
            
            content.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>基本信息</h6>
                        <table class="table table-sm">
                            <tr><td>策略名称:</td><td><strong>${data.strategy_name}</strong></td></tr>
                            <tr><td>UUID:</td><td><code>${data.strategy_uuid}</code></td></tr>
                            <tr><td>健康状态:</td><td><span class="status-badge status-${data.health_status}">${getHealthStatusText(data.health_status)}</span></td></tr>
                            <tr><td>最后检查:</td><td>${data.last_check_time ? new Date(data.last_check_time).toLocaleString() : '-'}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>性能指标</h6>
                        <div class="metrics-container">
                            ${renderMetrics(data.metrics || {})}
                        </div>
                    </div>
                </div>
                ${data.anomalies && data.anomalies.length > 0 ? `
                <div class="mt-3">
                    <h6>异常信息</h6>
                    <div class="alert alert-warning alert-custom">
                        ${data.anomalies.map(anomaly => `<div>• ${anomaly}</div>`).join('')}
                    </div>
                </div>
                ` : ''}
            `;
        }

        // 渲染指标
        function renderMetrics(metrics) {
            if (Object.keys(metrics).length === 0) {
                return '<p class="text-muted">暂无指标数据</p>';
            }
            
            return Object.entries(metrics).map(([key, value]) => `
                <div class="d-flex justify-content-between">
                    <span>${key}:</span>
                    <strong>${value}</strong>
                </div>
            `).join('');
        }

        // 验证策略
        async function validateStrategy(strategyUuid = null) {
            const uuid = strategyUuid || currentStrategyUuid;
            if (!uuid) return;
            
            try {
                showToast('正在验证策略...', 'info');
                
                const response = await fetch(`${API_BASE_URL}/${uuid}/validate`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        strategy_path: '/path/to/strategy',  // 实际应用中需要获取真实路径
                        validation_types: null,
                        force_refresh: false
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showToast('策略验证完成', 'success');
                    // 可以显示验证结果的详细信息
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('策略验证失败:', error);
                showToast('策略验证失败', 'error');
            }
        }

        // 检查依赖
        async function checkDependencies(strategyUuid = null) {
            const uuid = strategyUuid || currentStrategyUuid;
            if (!uuid) return;
            
            try {
                showToast('正在检查依赖...', 'info');
                
                const response = await fetch(`${API_BASE_URL}/${uuid}/dependencies`);
                const result = await response.json();
                
                if (result.success) {
                    showToast('依赖检查完成', 'success');
                    // 可以显示依赖检查结果的详细信息
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('依赖检查失败:', error);
                showToast('依赖检查失败', 'error');
            }
        }

        // 恢复策略
        async function recoverStrategy(strategyUuid = null) {
            const uuid = strategyUuid || currentStrategyUuid;
            if (!uuid) return;
            
            try {
                showToast('正在恢复策略...', 'info');
                
                const response = await fetch(`${API_BASE_URL}/${uuid}/recover`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        strategy_uuid: uuid,
                        recovery_type: 'auto',
                        force_recovery: false
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showToast('策略恢复任务已启动', 'success');
                    // 刷新策略列表
                    setTimeout(refreshStrategies, 2000);
                } else {
                    throw new Error(result.message);
                }
            } catch (error) {
                console.error('策略恢复失败:', error);
                showToast('策略恢复失败', 'error');
            }
        }

        // 刷新策略列表
        function refreshStrategies() {
            loadStrategies();
        }

        // 添加策略
        function addStrategy() {
            const form = document.getElementById('addStrategyForm');
            const formData = new FormData(form);
            
            // 这里应该调用添加策略的API
            showToast('添加策略功能待实现', 'info');
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('addStrategyModal'));
            modal.hide();
        }

        // 显示Toast通知
        function showToast(message, type = 'info') {
            if (!settings.showNotifications) return;
            
            const toastContainer = document.getElementById('toastContainer');
            const toastId = 'toast_' + Date.now();
            
            const toastHtml = `
                <div class="toast" id="${toastId}" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <i class="bi bi-${getToastIcon(type)} me-2 text-${getToastColor(type)}"></i>
                        <strong class="me-auto">系统通知</strong>
                        <small class="text-muted">刚刚</small>
                        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                    </div>
                    <div class="toast-body">
                        ${message}
                    </div>
                </div>
            `;
            
            toastContainer.insertAdjacentHTML('beforeend', toastHtml);
            
            const toastElement = document.getElementById(toastId);
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
            
            // 自动清理
            toastElement.addEventListener('hidden.bs.toast', function() {
                toastElement.remove();
            });
        }

        // 获取Toast图标
        function getToastIcon(type) {
            const iconMap = {
                'success': 'check-circle',
                'error': 'exclamation-triangle',
                'warning': 'exclamation-triangle',
                'info': 'info-circle'
            };
            return iconMap[type] || 'info-circle';
        }

        // 获取Toast颜色
        function getToastColor(type) {
            const colorMap = {
                'success': 'success',
                'error': 'danger',
                'warning': 'warning',
                'info': 'info'
            };
            return colorMap[type] || 'info';
        }
    </script>
</body>
</html>